<template>
    <div style="width: 100%; height:100%;">
      <div ref="chartRef" style="width: 90%; height:400px"></div>
    </div>
  </template>
  <script lang="ts">
import { defineComponent, ref, Ref, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
  props: {
    rowdata: {
      type: Array as PropType<Array>,
      default: [],  // 设置默认值
    },
    title: {
      type: String as PropType<string>,
      default: 'IP统计',  // 设置默认值
    },
    title1: {
      type: String as PropType<string>,
      default: "按子网统计IP数目",  // 设置默认值
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, resize, echarts, getInstance } = useECharts(
      chartRef as Ref<HTMLDivElement>,
    );
    onMounted(() => {
      initchart()
    })
    function initchart() {
      setOptions({
        graphic: [
          {
            type: 'text',
            id: 'mainTitle',
            left: 30,
            top: 10,
            style: {
              text: props.title,
              fill: '#333',
              fontSize: 20,
              fontWeight: 'bold',
            }
          },
          {
            type: 'text',
            id: 'subTitle',
            left: 30,
            top: 35,
            style: {
              text: props.title1,
              fill: '#999',
              fontSize: 12,
            }
          },
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          top:'15%'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            data:props.rowdata ,
            center:['35%','60%'],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        toolbox: {
          right: "0%",
          top: "20px",
          feature: {
            dataView: {},
            restore: {},
            saveAsImage: {},
          },
        },
      })
    }
    return {
      chartRef,
      initchart
    }
  }
})
  </script>
  <style scoped lang=less>
.index2 {
    width: 100%;
    height: 100%;
    background: #fff;
  }
</style>